<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<text class="title">
			{{title}}
		</text>
		<view class="subtitle">
			{{subtitle}}
		</view>
		<view style="margin-top: 45px;width: 100%; text-align: center;">
			<u-button type="success" @click="handleShowAuth">微信登录</u-button>
		</view>

		<!--用户信息获取-->
		<u-popup :show="infoVisible" mode="bottom" style="padding:20rpx;" :round="10" closeOnClickOverlay closeable
			@close="infoVisible=false">
			<view style="padding: 10px 10px;">
				<text style="font-weight:bold">申请获取您的头像、昵称</text>
			</view>
			<view style="padding: 0px 20rpx; margin: 0px 10rpx 40rpx 10rpx; ">
				<view style="display: flex; padding: 5px 5px;">
					<view style="flex: 1; line-height: 50px; height: 50px;"><text>头像：</text></view>
					<view style="line-height:35px; height: 35px;width:35px; border: 1px solid #e8e8e8; border-radius: 50px; overflow: hidden;">
						<button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<u-image :src="avatarUrl" width="35px" height="35px" shape="circle"
								 >
							</u-image>
						</button>
					</view>
				</view>

				<view style="display: flex; margin: 5px 5px;">
					<view style="flex: 1; line-height: 35px; height: 35px;"><text>昵称：</text></view>
					<view style="">
						<input type="nickname" placeholder="请输入昵称" v-model="nickname"
							style="border-bottom: 1px solid #ececec; margin: 10px 0; padding: 5px 10px; text-align: right; font-size: 12px;"
							bindblur="getNickname" />
					</view>
				</view>
				<view style="display: flex;">
					<u-button style="margin: 0px 10px;" @click="handleRefuse">拒绝</u-button>
					<view style="width: 15px;"></view>
					<u-button style="margin: 0px 10px;" type="success" @click="handleAuthOk">允许</u-button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '耒耜AI大模型',
				subtitle: '农业领域全智AI大模型',
				showAuthTip: false,
				infoVisible: false,
				avatarUrl: '/static/user.png',
				nickname: ''
			}
		},
		onLoad() {

		},
		methods: {
			//微信code登录
			handleLogin(){
				var _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(JSON.stringify(loginRes));
						console.log(loginRes.code);
						var params = {
							code: loginRes.code
						}
						_this.api.login(params).then(lres => {
							console.log(lres);
						})
					}
				});
			},
			handleShowAuth() {
				this.infoVisible = true;
				var _this = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res);
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log(JSON.stringify(loginRes));
									console.log(loginRes.code);
									var params = {
										code: loginRes.code
									}
									_this.api.login(params).then(lres => {
										console.log(lres);
									})
								}
							});
						}
					}
				})
				console.log('授权提示');

			},
			onChooseAvatar(e) {
				console.log(e);
				this.avatarUrl = e.detail.avatarUrl;
			},
			getNickname(e) {
				this.nickname = e.detail.nickname;
			},
			handleAuthConfirm() {
				this.showAuthTip = false;
			},
			handleRefuse() {
				this.avatarUrl = '/static/user.png';
				this.nickname = "";
				this.infoVisible = false;
			},
			handleAuthOk() {
				if (this.nickname == "" || this.avatarUrl == "") {
					this.$refs.uToast.show({
						type: 'error',
						title: '默认主题',
						message: "请填写您的昵称",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					});
					return;
				}
				this.infoVisible = false;
				uni.navigateTo({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style scoped>
	.u-button {
		border: none !important;

	}

	button {
		background: none;
		/* 去除背景色 */
		border: none;
		/* 去除边框 */
		outline: none;
		/* 去除点击后的轮廓 */
		padding: 0;
		/* 去除内边距 */
		margin: 0;
		/* 去除外边距 */
		cursor: pointer;
		/* 给予指针样式 */
		border-radius: 80px;
		overflow: hidden;
	}

	img {
		width: 100%;
		/* 根据需要设置图片宽度 */
		height: auto;
		/* 图片高度自适应 */
		display: block;
		/* 去除图片下方的空白 */
	}

	button:active {
		border: none;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
		margin: 40px;
	}

	.logo {
		height: 256rpx;
		width: 256rpx;
		margin-top: 80rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.title {
		font-size: 36rpx;
		color: #3c3c3e;
		font-weight: bold;
	}

	.subtitle {
		line-height: 60px;
		height: 60px;
	}
</style>